<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>我的请求</title>
    <#include "/pubHeadStyleTree.html">
</head>
<body>

<div style="position: relative;height: 100%;">
    <div class="ccpui-trees" >
        <p class="isShowTree colorSwitch">
            <span style="float: left;color: #fff">&nbsp;&nbsp;流程分类</span>
            <i layadmin-event="treeFlexible" class="layui-icon layui-icon-prev"></i>
        </p>
        <div style="margin-top: 6px;" >
            <ul class="ccpui-iconTree iconTrees">
                <li><a class="iconfont iconshuaxin- zTree-refresh" title="刷新"></a></li>
                <li><a class="iconfont iconwenjianjia1-copy zTree-triangle-d" title="展开"></a></li>
                <li><a class="iconfont iconfolder1 zTree-triangle-r" title="收起"></a></li>
                <input type="text" style="width: 50%" class="catZtreeValue">
            </ul>
            <ul id="treeSelectGlobalType" class="ztree ccpui-listZtree"></ul>
        </div>
    </div>
    <div class="ccpui-coreContent" style="position: absolute;top:10px;right:10px;bottom: 0;left: 250px">
        <table id="myRequestList" lay-filter="myRequestList" ></table>
    </div>
</div>


<script type="text/html" id="headerToolsBar">
    <div class="ccpui-enterSel">
    <div class="layui-btn-container">
        <a class="layui-btn layui-btn-sm" lay-event="query">
            <i class="layui-icon layui-icon-search"></i>
            <span>查询</span>
        </a>
        <a class="layui-btn layui-btn-sm" lay-event="reset">
            <i class="layui-icon layui-icon-refresh"></i>
            <span>重置</span>
        </a>
    </div>
    <form class="layui-form" action="" lay-filter="myRequestListQueryForm" style="margin-top:10px">
        <div class="table-top-filter">
            <div class="table-filter-alone">
                <label class="layui-form-label">请求标题</label>
                <input type="text" name="Q_subject_SL" id="subject" class="layui-input filter-value" placeholder="请求标题"/>
            </div>
            <div class="table-filter-alone">
                <label class="layui-form-label">流程名称</label>
                <input type="text" name="Q_processName_SL" id="processName" class="layui-input filter-value"
                       placeholder="流程名称"/>
            </div>
            <div class="table-filter-alone">
                <label class="layui-form-label">状态</label>
                <select name="status" id="status" class="layui-input filter-value">
                    <option value="">所有</option>
                    <option value="1">正在运行</option>
                    <option value="5">已撤销</option>
                    <option value="6">已驳回</option>
                    <option value="7">已追回</option>
                </select>
            </div>

            <div class="table-filter-alone">
                <label class="layui-form-label">工单号</label>
                <input type="text" name="Q_globalFlowNo_SL" id="globalFlowNo" class="layui-input filter-value"
                       placeholder="工单号"/>
            </div>
            <div class="table-filter-alone">
                <label class="layui-form-label">创建时间</label>
                <input type="text" name="Q_createTime_DL" id="createTime" class="layui-input filter-value"
                       placeholder="开始时间"/>
            </div>
            <div class="table-filter-alone">
                <label class="layui-form-label">至</label>
                <input type="text" name="Q_endCreateTime_DG" id="endCreateTime" class="layui-input filter-value"
                       placeholder="结束时间"/>
            </div>
        </div>
    </form>
    </div>
</script>
<!--表格序列号-->
<script type="text/html" id="serialNum">
    {{d.LAY_TABLE_INDEX + 1}}
</script>
<script type="text/html" id="myRequestBar">

    {{#  if(d.status != 7 && !d.currentNodeIsFirst){ }}
    <a class="layui-btn layui-btn-xs" lay-event="recover">追回</a>
    {{#  } }}

    {{#  if(d.status == 7 || d.currentNodeIsFirst ){ }}
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    {{#  } }}

</script>

<script>
    layui.config({
        base: serverPath.systemPath + staticPath.systemPath //静态资源所在路径
    }).extend({
        index: 'index' //主入口模块
    }).use(['index','table', 'layer', 'laydate', 'util', 'commons', 'setter', 'totalFilter', 'common'], function () {
        var table = layui.table;
        var layer = layui.layer;
        var util = layui.util;
        var $ = layui.$;
        var setter = layui.setter;
        var laydate = layui.laydate;
        var commons = layui.commons;
        var common = layui.common;
        var totalFilter = layui.totalFilter;

        var tableH = commons.tabHeight();

        catZtree();
        loadTable(serverPath.workflowPath + setter.workflowLinkPath + 'processRun/list/myRequestList');

        function catZtree() {
            $.ajax({
                url: serverPath.workflowPath + setter.workflowLinkPath+"processRun/getMyRequestAndMyCompletedType?category=myRequest",
                type: "post",
                dataType: 'json',
                async: false,
                success: function (data) {
                    var zNodes = data.data;
                    var setting = {
                        view: {
                            showLine: false,
                            nameIsHTML: true, //允许name支持html
                            selectedMulti: false
                        },
                        edit: {
                            enable: false,
                            editNameSelectAll: false
                        },
                        data: {
                            simpleData: {
                                enable: true,
                                idKey: "typeId",
                                pIdKey: "parentId"

                            },
                            key: {
                                name: "typeName"
                            }
                        },

                        callback: {
                            onClick: onClickType
                        }
                    };
                    $.fn.zTree.init($('#treeSelectGlobalType'), setting, zNodes);
                    component.fuzzySearch('treeSelectGlobalType', '.catZtreeValue', null, true); //初始化模糊搜索方法
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.alert("暂无数据，请稍后操作！" + XMLHttpRequest.status);
                }
            });
        }


        //点击左树事件
        function onClickType(event, treeId, treeNode) {
            var selectTypeId = treeNode.typeId;
            var nodePath = treeNode.nodePath;
            var url = serverPath.workflowPath + setter.workflowLinkPath + 'processRun/list/myRequestList?typeId=' + selectTypeId + '&nodePath=' + nodePath;
            if (null == treeNode.parentId) {
                url = serverPath.workflowPath + setter.workflowLinkPath + 'processRun/list/myRequestList';
            }
            loadTable(url);
        }

        //展开
        $(".iconTrees .zTree-triangle-d").click(function () {
            $.fn.zTree.getZTreeObj("treeSelectGlobalType").expandAll(true);
        });
        //收起
        $(".iconTrees .zTree-triangle-r").click(function () {
            $.fn.zTree.getZTreeObj("treeSelectGlobalType").expandAll(false);
        });
        //刷新
        $(".iconTrees .zTree-refresh").click(function () {
            catZtree();
        });

        //第一个实例

        function loadTable(url) {
            table.render({
                elem: '#myRequestList'
                , cellMinWidth: 80
                , title: '流程定义模型'
                , height: tableH
                , url: url
                , method: 'post'
                , toolbar: '#headerToolsBar'
                ,defaultToolbar: ['filter', 'print']
                , page: true
                ,autoSort: false
                , cols: [[
                    {field: 'runId', title: '序号', width:80,align: 'center', templet: '#serialNum'}
                    , {field: 'globalFlowNo', title: '工单号', sort: true,minWidth: 150, align: 'center'}
                    , {
                        field: 'subject',
                        title: '请求标题',
                        sort: true,
                        minWidth: 300,
                        align: 'center',
                        event: 'detail',
                        style: 'color:#1E9FFF; cursor:pointer',
                    }

                    , {
                        field: 'processName', title: '流程名称', sort: true,align: 'center'
                    }

                    , {
                        field: 'createtime', title: '创建时间', minWidth: 200,sort: true,  align: 'center', templet: function (d) {
                            return util.toDateString(d.createTime, "yyyy-MM-dd HH:mm:ss");
                        }
                    }
                    , {
                        field: 'duration', title: '持续时间', sort: true,  align: 'center', templet: function (d) {
                            var date1 = util.toDateString(d.createTime, "yyyy-MM-dd HH:mm:ss");  //开始时间
                            if(d.endTime==null) {
                                var date2 = new Date();    //结束时间
                            }else {
                                var date2 = new Date(util.toDateString(d.endTime, "yyyy-MM-dd HH:mm:ss"));
                            }
                            var date3 = date2.getTime() - new Date(date1.replace(/-/g ,'/')).getTime();   //时间差的毫秒数
                            //计算出相差天数
                            var days = Math.floor(date3 / (24 * 3600 * 1000))
                            //计算出小时数
                            var leave1 = date3 % (24 * 3600 * 1000)    //计算天数后剩余的毫秒数
                            var hours = Math.floor(leave1 / (3600 * 1000))
                            //计算相差分钟数
                            var leave2 = leave1 % (3600 * 1000)        //计算小时数后剩余的毫秒数
                            var minutes = Math.floor(leave2 / (60 * 1000))

                            return days + "天" + hours + "时" + minutes + "分";
                        }
                    }
                    , {field: 'typeName', title: '类型', sort: true, align: 'center'}
                    , {
                        field: 'status',
                        title: '状态',
                        sort: true,
                        width:100,
                        align: 'center',
                        style: 'color: #5FB878;',
                        templet: function (d) {
                            if (d.status == 1) {
                                return "正在运行";
                            } else if (d.status == 5) {
                                return "<span style='color: #af0000'>已撤销</span>";
                            } else if (d.status == 6) {
                                return "<span style='color: #af0000'>已驳回</span>";
                            } else if (d.status == 7) {
                                return "<span style='color: #af0000'>已追回</span>";
                            }
                        }
                    }
                    , {title: '管理', toolbar: '#myRequestBar', align: 'center'}
                ]],
                done:function () {
                    commons.reflashDate({startName: '#createTime', endName: '#endCreateTime'});
                    common.tableSelectCon('.ccpui-enterSel .layui-form input','a[lay-event=query]','.ccpui-enterSel')
                }
            });
            totalFilter.init('myRequestList');
        }

        table.on('toolbar(myRequestList)', function (obj) {
            switch (obj.event) {
                case 'query':
                    common.tableConditionRender("myRequestList", "myRequestListQueryForm", {where: {}}, false);
                    break;
                case 'reset':
                    common.tableConditionRender("myRequestList", "myRequestListQueryForm", {where: {}}, true);
                    break;
            }
        });


        table.on('tool(myRequestList)', function (obj) {
            var data = obj.data;
            var isNeedReload=true;
            switch (obj.event) {
                case 'detail':
                     layer.open({
                         type: 2,
                         title: "流程明细",
                         area: ['80%', '80%'],
                         content: serverPath.workflowPath + setter.workflowLinkPath + 'processRun/view/info?runId=' + data.runId
                             + '&prePage=' + "myRequest",
                         cancel: function(index, layero){
                             isNeedReload=false;
                         },
                         end:function () {
                             if(isNeedReload){
                                 table.reload('myRequestList', {
                                     page: {
                                         curr: 1
                                     }
                                 });
                                 totalFilter.init('myRequestList');
                             }
                         }
                     });
                    break;
                case 'del':
                    layer.confirm("确认要删除该数据吗？", {title: '删除确认'}, function (index) {

                        $.ajax({
                            url: serverPath.workflowPath + setter.workflowLinkPath + "processRun/del?runId=" + data.runId,
                            type: 'DELETE',
                            dataType: 'json',
                            success: function (data) {
                                //成功后的提示
                                if(data.code == 0){
                                    layer.alert("删除成功");
                                    table.reload('myRequestList', {
                                        page: {
                                            curr: 1
                                        }
                                    });
                                }else {
                                    layer.alert("删除失败");
                                }

                                layer.close(index);
                                totalFilter.init('myRequestList');
                            },
                            error: function (XMLHttpRequest) {
                                layer.alert("请求失败！" + XMLHttpRequest.status);
                            }
                        });
                    });
                    break;
                case 'recover':
                    layer.open({
                        type: 2,
                        title: "流程追回",
                        shade: 0.3,
                        btn:["追回","取消"],
                        skin: 'btn-class',
                        left: 200,
                        area: ['450px', '300px'],
                        content: serverPath.workflowPath + setter.workflowLinkPath + 'processRun/view/redoDialog?runId='
                            + data.runId + '&backToStart=' + 0,
                        yes: function (index,layero) {
                            //得到iframe页的窗口对象
                            var iframeWin = window[layero.find('iframe')[0]['name']];
                            //执行iframe页的save方法
                            iframeWin.recover(reload);
                        }
                    });
                    break;
            }
        });

        function reload(){
            table.reload('myRequestList', {
                page: {
                    curr: 1
                }
            });
            totalFilter.init('myRequestList');
        }

        commons.reflashDate({startName: '#createTime', endName: '#endCreateTime'});
        window.Initialization = function () {
            commons.reflashDate({startName: '#createTime', endName: '#endCreateTime'});
        };
        common.tableSort("myRequestList",{show:window.Initialization});
    });
</script>
</body>
</html>
